import React, { memo, useEffect, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { getArtiList } from '../home/store/actionCreators'
import ArList from '../../components/ArList'
import { Pagination } from "antd";
export default memo(function WorksList(props, ref) {
    const { artiList } = useSelector(
        (state) => ({
            artiList: state.getIn(["home", "artiList"]),
        }),
        shallowEqual
    );

    const [page, setPage] = useState(1)
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getArtiList({
            page: page,
            pageSize: 9999,
        }));
    }, [dispatch, page]);
    const handleChange = (val) => {
        setPage(val)
    }
    return (
        <div className='w listPadding' >
            <ArList list={artiList.list} spanNumber={6}></ArList>
            <div style={{ textAlign: 'center', marginTop: '20px' }}>
                <Pagination
                    defaultCurrent={page || 1}
                    current={typeof page == 'undefined' ? 1 : page}
                    defaultPageSize={12}
                    onChange={e => handleChange(e)}
                    total={artiList.total}
                />
            </div>
        </div>
    );
});
